<template>
  <div class="main-content">
    <div style="margin: 30px 0; text-align: center">
      <h2>我的动态</h2>
    </div>
    <div v-if="data.moments.length === 0" style="text-align: center; margin-top: 50px;">
      暂无动态内容
    </div>
    <div v-else>
      <el-card v-for="moment in data.moments" :key="moment.id" class="box-card" shadow="hover" @click="navigateToDetail(moment.id)">
        <div slot="header" class="clearfix">
          <img :src="moment.userAvatar" alt="" class="user-avatar">
          <span class="user-name">{{ moment.userName }}</span>
          <span class="created-time">{{ moment.createdTime }}</span>
        </div>
        <div class="content">
          {{ moment.content }}
        </div>
        <div v-if="moment.circleName" class="circle-info">
          <span class="label-bold">来自:</span> {{ moment.circleName }}
        </div>
        <div v-if="moment.picUrlList && moment.picUrlList.length > 0" class="images">
          <img v-for="(pic, index) in moment.picUrlList" :key="index" :src="pic" alt="" class="image">
        </div>
        <div class="footer">
          <span>{{ moment.replyCount }}条评论</span>
          <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon-color="#6200ea"
              title="确定删除该动态吗？"
              @confirm="removeMoment(moment.id)"
          >
            <template #reference>
              <el-button type="danger" icon="Delete" circle size="small" @click.stop style="float: right;"></el-button>
            </template>
          </el-popconfirm>
        </div>
      </el-card>
    </div>
    <div v-if="data.total > data.pageSize" style="margin: 20px 0; text-align: center;">
      <el-pagination @current-change="load" background layout="prev, pager, next" :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" />
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();

const data = reactive({
  moments: [],
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const load = () => {
  const userId = JSON.parse(localStorage.getItem('user') || '{}').id;
  request.post('/circle/share/moment/getMomentsByUser', {
    userId: userId,
    pageNum: data.pageNum,
    pageSize: data.pageSize,
  }).then(res => {
    if (res.code === '200') {
      data.moments = res.data.list;
      data.total = res.data.total;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const navigateToDetail = (targetId) => {
  router.push(`/front/plantCircleDetail?id=${targetId}`);
};

const removeMoment = (momentId) => {
  request.post('/circle/share/moment/remove', {
    id: momentId,
  }).then(res => {
    if (res.code === '200') {
      ElMessage.success('删除成功');
      // 重新加载数据
      load();
    } else {
      ElMessage.error(res.msg);
    }
  });
};

load();
</script>

<style scoped>
.main-content {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.box-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  margin-right: 10px;
}

.user-name {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  line-height: 40px;
}

.created-time {
  float: right;
  font-size: 14px;
  color: #999999;
  line-height: 40px;
}

.content {
  margin: 10px 0;
  font-size: 14px;
  color: #666666;
}

.circle-info {
  margin: 5px 0;
  font-size: 14px;
  color: #999999;
}
.label-bold {
  font-weight: bold;
}
.images {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.image {
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
}

.footer {
  text-align: right;
  font-size: 14px;
  color: #999999;
}
</style>



